.settings {
  background: #fff;
  @include display-flex;
  @include flex-flow(column);
  @include user-select(none);
}

.settings-scroller {
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  @include flex(1);
  @include transform(translateZ(0));
}

.setting-item-toggle {
  position: relative;
  display: block;
  cursor: pointer;
  padding: 0 16px;
  height: 51px;

  @include display-flex;
  @include align-items(center);

  & input[type=checkbox] {
    position: absolute;
    height: 1px;
    width: 1px;
    overflow: hidden;
    clip: rect(1px, 1px, 1px, 1px);
  }

  & input:focus + .material-switch {
    .handle {
      width: 25px;
      height: 25px;
      top: -5px;
      box-shadow: 0 1px 3px rgba(0,0,0,0.5),
                inset 0 0 0 2px #3F51B5;
    }
  }
}

.setting-item-range {
  padding: 10px 16px 20px;
  @include display-flex;
  @include flex-flow(column);
  @include justify-content(center);

  & .label-text {
    margin-bottom: 0.7em;
  }
}

.settings > section:not(:first-child) {
  border-top: 1px solid #e7e7e7;
}

.settings-sub-heading {
  margin: 0;
  padding: 12px 16px 16px;
  font-weight: normal;
  font-size: 0.9rem;
  color: #898989;
}

.setting-reset-row {
  padding: 12px 16px 16px;
  text-align: right;
}

.setting-reset {
  text-transform: uppercase;
  color: white;
  background: #3F51B5;
  padding: 9px 14px;
  font-size: 0.9rem;
  border-radius: 5px;
  position: relative;
  overflow: hidden;

  & .ripple {
    top: -94%;
    bottom: auto;
    padding-top: 100%;
  }
}
